window.addEventListener('DOMContentLoaded', function() {
    var mod = this.document.querySelector('.mod');
    var f = this.document.querySelector('.f');
    var bigImg = this.document.querySelector('.bigImg');

    mod.addEventListener('mouseenter', function() {
        f.style.display = 'block';
    })
    mod.addEventListener('mouseleave', function() {
        f.style.display = 'none';
    })
    var bMaxX = bigImg.offsetWidth;
    var bMaxY = bigImg.offsetHeight;
    var mMaxX = bigImg.offsetWidth;
    var mMaxY = bigImg.offsetHeight;
    mod.addEventListener('mousemove', function(e) {
        f.style.top = (e.pageY - this.offsetTop - f.offsetHeight / 2) + 'px';
        f.style.left = (e.pageX - this.offsetLeft - f.offsetLeft / 2) + 'px';
        bigImg.style.top = -(e.pageY - this.offsetTop) * bMaxY / mMaxY + 'px';
        bigImg.style.left = -(e.pageX - this.offsetLeft) * bMaxX / mMaxX + 'px';
    })

})